<template>
  <div class="app-num">
    <div class="title">应用数量</div>
    <div class="num-box">{{ props.numObj.appCount }}</div>
    <div class="title">SDK授权概况</div>
    <div class="sdk-line">
      <div class="line__label">联网激活</div>
      <div :title="styleAttr['--online-width']" class="line__block bg1 online" :style="styleAttr"></div>
      <div class="line__num">{{ props.numObj.onlineActivationCount }}</div>
    </div>
    <div class="sdk-line">
      <div class="line__label">离线激活</div>
      <div :title="styleAttr['--offline-width']" class="line__block bg2 offline" :style="styleAttr"></div>
      <div class="line__num">{{ props.numObj.offlineActivationCount }}</div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  const props = defineProps({
    numObj: {
      type: Object,
      default: () => {}
    },
    styleAttr: {
      type: Object,
      default: () => {}
    }
  })
</script>

<style lang="less" scoped>
  .app-num {
    display: flex;
    align-items: flex-start;
    padding: 32px;
    background: #fff;
    border: 1px solid @border1;
    border-radius: 10px;
    flex-direction: column;
    gap: 24px;

    .title {
      padding-bottom: 16px;
      width: 278px;
      font-size: 16px;
      color: @text01;
      border-bottom: 1px solid #e8e8eb;

      .font16b();
    }

    .num-box {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 50px;
      margin: 20px auto 0;
      margin-top: 4px;
      width: 128px;
      height: 127px;
      font-size: 38px;
      font-family: 'Noto Sans SC';
      color: @text01;
      background: linear-gradient(180deg, rgba(245, 249, 254, 0) 0%, #f5f9fe 100%);
      border: 2px solid rgba(183, 208, 248, 0.1);
      border-radius: 70px;
      gap: 10px;
      font-style: normal;
      font-weight: 700;
      line-height: normal;
    }

    .sdk-line {
      display: flex;
      gap: 8px;
      align-items: center;

      .online {
        position: relative;
        width: 192px;

        &::before {
          position: absolute;
          top: 0;
          left: 0;
          display: inline-block;
          width: var(--online-width);
          height: 36px;
          background: #649af0;
          content: '';
        }
      }

      .offline {
        position: relative;
        width: 192px;

        &::before {
          position: absolute;
          top: 0;
          left: 0;
          display: inline-block;
          width: var(--offline-width);
          height: 36px;
          background: #e8f0fd;
          content: '';
        }
      }

      .line__label {
        color: @text02;
        .font12();
      }

      .line__block {
        height: 36px;

        &.bg1 {
          // background: #649af0;
        }

        &.bg2 {
          // background: #e8f0fd;
        }
      }

      .line__num {
        color: @text01;
        .font12b();
      }
    }
  }
</style>
